<script type="text/html" template>
  <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
  <!-- 有问题 -->
  <link rel="stylesheet" href="{{ layui.setter.base }}style/css/moneyManage/ClassManage.css">
  
  <link rel="stylesheet" href="{{ layui.setter.base }}style/page.css"> 
  <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
</script>

<style>
  .addRoleButtonOnes {
    height: 20px;
    line-height: 20px;
    background: #3D8CC9;
    border: 0;
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 11px;
    color: #fff;
    bottom: 2px;
  }

  .addRoleButtonOnes {
    margin-left: 27px;
    margin-top: 17px;
  }

  .left {
    float: left;
  }

  .right {
    margin-left: 195px;
  }
  .layui-content{
    padding-left: 0px;
    padding-right: 0px;
  }
  #table-device-alert{
    margin-top: 12px;
  }
</style>

<!-- 第一个表格的 -->
<script type="text/html" id="barDemo">
  <i class="layui-icon layui-icon-add-circle-fine" style="cursor:pointer" lay-event="addmeum"></i>
  <i class="layui-icon layui-icon-edit" style="cursor:pointer" lay-event="edit"></i>
</script>

<!--头部的表格 -->
<!-- 按钮 -->
<div class="layui-fluid" style="padding:0px;">
  <div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 ClassTableTwo">
      <button type="button" class="addRoleButtonOnes layui-btn layui-btn-radius layui-btn-primary" data-type="addRole">
        <i class="layui-icon layui-icon-add-circle" style="font-size: 15px;"></i>
        <span>添加角色</span>
      </button>
    </div>
  </div>
</div>

<!-- 数据表格 -->
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 ClassTable">
      <!-- 第一个表格 -->
      <table id="shiftManagementSup" lay-even lay-skin="nob" class="layui-table" lay-filter="shiftManagementSup">

      </table>
    </div>
  </div>
</div>

<script type="text/html" id="onlyDel">
  <i class="layui-icon layui-icon-delete" style="cursor:pointer" lay-event="deleteElement"></i>
</script>

<!-- 第二个表格 -->
<div class="layui-fluid">
  <input type="text" id="dataBase" style="display:none">
  <div class="row">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 ClassTableTwo">
      <!-- 表格 -->
      <table id="shiftManagementSubTwo" lay-even lay-skin="nob" class="layui-table" lay-filter="shiftManagementSubTwo">
      </table>
      <!-- 按钮组合 -->
      <div class="ClassButtonTwo">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-primary" data-type="deleteFag" style="background-color: #FF4C4C;">
          <i class="layui-icon layui-icon-delete" style="font-size: 15px;"></i>
          删除
        </button>
        <button type="button" class="addNewBtn layui-btn layui-btn-radius layui-btn-primary" data-type="addRoleAlert"
          style="line-height: 20px;background: #3D8CC9;">
          <i class="layui-icon layui-icon-add-circle" style="font-size: 15px;"></i>
          <span>新增人员</span>
        </button>
      </div>
    </div>
  </div>
</div>
<!-- 新增人员 -->
<script type="text/html" id="addDeviceTpl">
  <style scoped>
    .leon-style-alert .layui-table-page,.layui-table-page .layui-laypage input{
            background-color:transparent;   
       }
       .leon-style-alert .layui-table-view {
         border-width: 1px;
         border-style: solid;
         border-color: #e6e6e6;
     }
 </style>
<div class="leon-style-alert">
  <div class="layui-alert-box">
    <div class="layui-alert-title">
      <span class="layui-title-inner">添加人员</span>
      <span class="layui-title-screen">
        <div class="screen-btn">
          <form class="layui-form" action="">
            <input type="search" name="keyWord" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
            <button type="button" lay-submit lay-filter="queryTableDeviceHeader" class="search-blank-icon"></button>
          </form>
        </div>
      </span>
    </div>
    <div class="layui-content">
      <div class="con1 toggle-btn">
        <span class="screen">
          <i class="query-icon  layui-icon"></i>
          <span class="query-inner">查询条件</span>
        </span>
        <i class="icon layui-icon layui-icon-down"></i>
      </div>
      <div class="con2 toggle-content">
        <form action="" class="layui-form">
          <label for="">工号:</label>
          <input type="text" name="job" />
          <label for="">姓名:</label>
          <input type="text" name="gen02" />
          <label for="">部门:</label>
          <input type="text" name="gem02" />
          <button type="button" lay-submit lay-filter="queryTableDevice"
            class="query layui-btn layui-btn-radius layui-btn-primary">
            <span class="search-icon"></span>
            <span class="btn-inner">查询</span>
          </button>
        </form>
      </div>
      <table class="layui-table" id="table-device-alert"></table>
    </div>
    <div class="footer layui-btn-containner" style="margin-top:20px;">
      <button class="btn1 layui-btn layui-btn-radius layui-btn-primary">添加</button>
      <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
    </div>
  </div>
</div>
</script>
<script>
  layui.use(['admin', 'form', 'user', 'table', 'api', 'laytpl', 'utill', 'laydate'], function () { //此段代码必不可少
    var $ = layui.$,
      admin = layui.admin,
      view = layui.view,
      api = layui.api,
      table = layui.table,
      setter = layui.setter,
      laytpl = layui.laytpl,
      utill = layui.utill,
      laydate = layui.laydate,
      form = layui.form;
    rander(); //调用这个方法
    function rander() {
      // 列定制
      utill.columnCustom('#shiftManagementSup', "RoleVO", {
        // 自己表格的接口
        url: api.host + api.RoleselectByParamList,
        toolbar: {
          toolbar: '#barDemo',
          title: '操作',
          event: 'detail',
          align: 'center',
        },
      });
      // 选择上面的表格(高亮当前选中的表格)
      table.on('row(shiftManagementSup)', function(obj){
            $(".layui-table-body tr:nth-child(even)").attr({"style":"background:#ccdae3"});
            $(".layui-table-body tr:nth-child(odd)").attr({"style":"background:#FFFFFF"});
            $(this).attr({"style":"background:#999999"});
            $("#dataBase").val(obj.data.tcRoleId);
            render1(obj.data.tcRoleId);
      });
      
      table.on('tool(shiftManagementSup)', function (obj) {
        var data = obj.data
        if (obj.event === 'edit') {
          admin.popup({
            title: '编辑',
            area: ['640px', '600px'],
            id: 'LAY-popup-user-add',
            shadeClose:false,
            success: function (layero, index) {
              view(this.id).render('moneyManage/alert/EditRole_alert', data).done(function () {
                var tcRoleType = data.tcRoleType;
                if (tcRoleType == 1) {
                  $("#zonBu").attr("checked");
                } else {
                  $("#fenBu").attr("checked");
                }
                // 取消的事件
                $('.buttonGrounpBtn').on('click', '.btn2', function () {
                  layer.close(index);
                });

                form.render(null, 'shiftManagementSup'); // 渲染当前那的表格
                // 回显效果(添加角色数据)
                form.val("layuiadmin-form-tags", {
                  "tcRoleName": data.tcRoleName,
                  "tcRoleDsc": data.tcRoleDsc,
                  "tcRoleType": data.tcRoleType
                })

                var pageNum = 0;
                var pageSize = 0;
                var datas = obj.data.tcRoleId;

                // 菊花图
                utill.loading.show();
                admin.req({
                  type: 'get',
                  url: api.host + api.RolePremitList,
                  data: {
                    pageNum: pageNum,
                    pageSize: pageSize
                  },
                  success: function (response) {
                    var res = response.data;
                    var str = '';
                    res.forEach((item) => {
                      str += `<li class="dropDownBtn" style="margin-top: 39px;font-size: 15px;font-weight: bold;">${item.title}<i class="layui-icon layui-icon-down"></i></li><li class="dropDownBox">`
                      item.value.forEach((list) => {
                        str += `  
                        <div id='${list.tcPrmtId}'>
                          <div class="left">
                              <input type="checkbox" name="" title="${list.tcPrmtDsc}" lay-skin="primary" lay-filter="tag" value="${list.tcPrmtId}">
                          </div>
                          <div class="right">
                              <input type="radio" name="${list.tcPrmtId}" value="0" title="普通员工" data-lang="OrdinaryStaff" checked>
                              <input type="radio" name="${list.tcPrmtId}" value="2" title="领导" data-lang="Leader">
                              <input type="radio" name="${list.tcPrmtId}" value="3" title="管理员" data-lang="Administrators">
                          </div>
                        </div>`
                      })
                    })
                    str += '</li>'
                    $("#tag").append(str);
                    $('body').on('click', '.dropDownBtn', function (e) {
                      var $target = $(e.target);
                      if ($target.hasClass('on')) {
                        $target.removeClass('on')
                        $target.next().slideDown();
                        $target.find('i').css('transform', 'rotate(0deg)');
                      } else {
                        $target.addClass('on')
                        $target.next().slideUp();
                        $target.find('i').css('transform', 'rotate(180deg)');
                      }
                    })
                    form.render();
                    admin.req({
                      type: 'get',
                      url: api.host + api.selectRoleforPermit,
                      data: {
                        "roleId": datas
                      },
                      success: function (response) {
                        var list = response.data;
                        list.forEach((item) => {
                          $("#" + item.tcPrmtId + ' input[type=checkbox]').attr("checked", true);
                          $("input[name=" + item.tcPrmtId + "][value=" + item.tcRlrpType + "]").prop("checked", "true");
                          form.render();

                        })
                        utill.loading.hide();
                      }
                    })
                  }
                });
                // 给角色添加权限
                form.on('submit(layuiadmin-app-form-submit)', function (data) {
                  var choose2 = $('#com_edit input[name="tcRoleType"]:checked ').val();
                  var field = data.field;
                  var arr_box = [];
                  $('input[type=checkbox]:checked').each(function () {
                    var prmtid = $(this).val()
                    var type = $('#' + prmtid + ' input[type=radio]:checked ').val()
                    var prmt = {
                      "tcRlrpPrmtId": prmtid,
                      "tcRlrpType": type,
                    }
                    //arr_box.push($(this).val());
                    arr_box.push(prmt);
                  });
                  var obj = {
                    "permit": arr_box,
                    "tcRoleType": choose2,
                    "role": {
                      "tcRoleDsc": field.tcRoleDsc,
                      "tcRoleId": datas,
                      "tcRoleName": field.tcRoleName,
                      "tcRoleType": choose2
                    }
                  }
                  admin.req({
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    url: api.host + api.updateRoleforPermit,
                    data: JSON.stringify(obj),
                    success: function (data) {
                      layer.msg(data.message);
                      layui.table.reload('#shiftManagementSup'); //重载表格  
                      layer.close(index); //执行关闭 
                    }
                  });
                  return false;
                });
              });
            }
          });
        }else if (obj.event === 'addmeum') {
          admin.popup({
            area: ['550px', '600px'],
            id: 'LAY-popup-content-add',
            shadeClose:false,
            success: function (layero, index) {
              view(this.id).render('moneyManage/tree1').done(function () {
                form.render(null, 'layuiadmin-app-form-list');
                //监听提交
                form.val("layuiadmin-app-form-list", {
                  "id": obj.data.tcRoleId,
                })
              });
            }
          });
        }
      });
    }
    render1(-1);
    function render1(tcRoleId) {
      utill.columnCustom('#shiftManagementSubTwo', "UserRoleVO", {
        // 自己表格的接口
        url: api.host + api.RoleGenSelect,
        toolbar: {
          toolbar: '#onlyDel',
          title: '操作',
          event: 'detail',
          align: 'center'
        },
        where: {
          roleId: tcRoleId
        }
      });
      // 下面的表格删除事件(success)
      table.on('tool(shiftManagementSubTwo)', function (obj) {
        var Gen01 = obj.data.gen01;
        var arr = [
          Gen01
        ]
        var bb = {
          "gen01": arr,
          "roleId": tcRoleId
        }
        if (obj.event === 'deleteElement') {
          layer.confirm('真的删除吗？', function (index) {
            admin.req({
              url: api.host + api.RoleGenDel,
              type: "POST",
              dataType: 'json',
              contentType: 'application/json',
              data: JSON.stringify(bb),
              //删除成功后重新渲染表格
              done: function (res) {
                layer.msg("删除成功");
                render1(tcRoleId);
                layer.close(index);
              }
            })
          })
        }
      })
    }
    // 新增人员
     $(".ClassButtonTwo").on("click", ".addNewBtn", function (e) {
         var checkStatus = table.checkStatus('#shiftManagementSup');
         if(checkStatus.data.length == 0){
           layer.msg("请您勾选一个角色");
           return;
         }
         var aa = checkStatus.data[0].tcRoleId;
         if (checkStatus.data.length > 1) {
              parent.layer.msg('只能选中一个角色', { icon: 2 });
              return;
          }else{
            layer.open({
            type: 1,
            title: false,
            area: ["662px", "536px"],
            fixed: true,
            shadeClose: false,
            closeBtn: 0,
            content: $("#addDeviceTpl").html(),
            success: active.addRoleAlert
          });
          }
      });
    // 角色管理新增人
    var active = {
      addRoleAlert: function (layero, index) {
          var checkStatus = table.checkStatus('#shiftManagementSup');
          if(checkStatus.data.length == 0){
             console.log("");
          }else{
            var tcRoleId = checkStatus.data[0].tcRoleId;
          }
          utill.columnCustom('#table-device-alert', "NUserRoleVO", {
          // 自己表格的接口
          url: api.host + api.RoleNotGenSelect,
          height:300,
          where: {
            roleId: tcRoleId,
          }
        });
        $('.leon-style-alert .con1').click(function(){
          $('.con2').toggle();
        })
        // 高查
        form.on("submit(queryTableDevice)", function (data) {
            var allData = data.field;
            table.reload("#table-device-alert", {
              where: allData
            });
            return false;
          });
        // 查询
        form.on("submit(queryTableDeviceHeader)", function (data) {
            var allData2 = data.field;
            table.reload("#table-device-alert", {
              where: allData2
            });
            return false;
          });
        // 回车
        utill.keyup('.searchInput', '.search-blank-icon');
        $(".btn1").click(function(){
           var checkStatus = table.checkStatus('#table-device-alert');
            if (checkStatus.data.length == 0) {
                parent.layer.msg('请至少选择一个人员！', { icon: 2 });
                return;
            }
            var arr = [];
            for (var i = 0; i < checkStatus.data.length; i++) {
              var obj = {
                "tcRlgrGen01": checkStatus.data[i].gen01,
                "tcRlgrRoleid": tcRoleId
              }
              arr.push(obj);
            }
            admin.req({
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            url: api.host + api.insertUserForRole,
            data: JSON.stringify(arr),
            success: function (data) {
              layer.close(index);
              render1($("#dataBase").val());
              layer.msg(data.message);
            }
          });
        })
        // 取消关闭
        $(".btn2").click(function(){
          layer.closeAll();
        })
      },
      // 添加角色
      addRole: function () {
        admin.popup({
          title: '添加角色',
          area: ['640px', '600px'],
          shadeClose: false,
          id: 'LAY-popup-user-add',
          success: function (layero, index) {
            view(this.id).render('moneyManage/alert/addRole_alert').done(function () {
              // 给取消按钮添加事件
              $('.buttonGrounpBtn').on('click', '.btn2', function () {
                layer.close(index);
              });
            });
          }
        });
      },
      // 角色管理下面的表格的批量删除
      deleteFag: function () {
        var roleId = $("#dataBase").val();
        var checkStatus = table.checkStatus('#shiftManagementSubTwo');
        if (checkStatus.data.length == 0) {
          parent.layer.msg('请至少选择一个人员进行删除！', { icon: 2 });
          return;
        }
        var number_llp = [];
        var objs = {
          "gen01": number_llp,
          "roleId": roleId
        };
        for (var i = 0; i < checkStatus.data.length; i++) {
          number_llp.push(checkStatus.data[i].gen01)
        }
        admin.req({
          type: 'post',
          dataType: 'json',
          contentType: 'application/json',
          url: api.host + api.RoleGenDel,
          data: JSON.stringify(objs),
          success: function (data) {
            render1($("#dataBase").val());
            layer.close(layer.index);
            layer.msg("删除成功");
          }
        });
      }
    };
    // 给按钮添加事件
    $('.layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
</html>